

Ext.onReady(function() {

	    Ext.QuickTips.init();
	    
	// turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'side';
    
    // create the Data Store
    
    var ownerStore = new Ext.data.Store({
    	proxy : new Ext.data.DWRProxy(DwrClinic.findOwners),
    	reader : new Ext.data.DwrDataReader({
    	id:'id',
    	fields: ['id','displayableName','address','city']}) 
	});     
	
	
	    var ownerForm = new Ext.FormPanel({
        labelWidth: 75, // label settings here cascade unless overridden
        frame:true,
        id:'ownerForm',
        title: 'Fetch Database',
        items: [
            new Ext.form.FieldSet({
                title: 'Contact Information',
                defaultType: 'textfield',
                items: [{
                        fieldLabel: 'First Name',
                        name: 'first',
                        width:190
                    }, {
                        fieldLabel: 'Last Name',
                        name: 'last',
                        width:190
                    }, {
                        fieldLabel: 'Company',
                        name: 'company',
                        width:190
                    }, {
                        fieldLabel: 'Email',
                        name: 'email',
                        vtype:'email',
                        width:190
                    },
/*
                    new Ext.form.ComboBox({
                        fieldLabel: 'State',
                        hiddenName:'state',
                        store: new Ext.data.SimpleStore({
                            fields: ['abbr', 'state'],
                            data : Ext.exampledata.states // from states.js
                        }),
                        valueField:'abbr',
                        displayField:'state',
                        typeAhead: true,
                        mode: 'local',
                        triggerAction: 'all',
                        emptyText:'Select a state...',
                        selectOnFocus:true,
                        width:190
                    }),
*/
                    new Ext.form.DateField({
                        fieldLabel: 'Date of Birth',
                        name: 'dob',
                        width:190,
                        allowBlank:false
                    })
                ],
                
                        buttons: [{
             text: 'Fetch',
             handler: function(){
                             Ext.MessageBox.show( {
                                                title: 'Please wait...',
                                                msg: 'Processing ...',
                                                 width: 240,
                                                progress: false,
                                                closable: false
                                            } );    
                
                 var stdate = Ext.getCmp('sd').getValue();
                 var eddate = Ext.getCmp('ed').getValue();
                 
                 ownerForm.myForm.doAction("DWRLoad", {
        dwrMethod: DwrClinic.loadOwner,
        callback: someFunction
    });
                 /*
                 DwrClinic.findVisits(stdate, eddate, function(data) {
                       Ext.MessageBox.hide();
                      Ext.Msg.alert('Status', 'Changes applied successfully.');                    
                   });
                   
                   */
             }
        }]
                
            })
        ]
/*        items: [  new Ext.form.DateField({
                                    fieldLabel: 'Start Date',
                                    id:'sd',
                                    name: 'sd',
                                    width:120,
                                    allowBlank:false
                                }),Ext.form.DateField({
                                    fieldLabel: 'End Date',
                                    id:'ed',
                                    name: 'ed',
                                    width:120,
                                    allowBlank:false
                                })
        ],
        */

    });


	new Ext.Viewport({
	    layout: 'border',
	    defaults: {
	        activeItem: 0
	    },
	    items: [{
	        region: 'north',
	        html: '<h1 class="x-panel-header">Petstore</h1>',
	        autoHeight: true,
	        border: false,
	        margins: '0 0 5 0'
	    }, {
	        region: 'west',
	        collapsible: true,
	        title: 'Navigation',
	        xtype: 'treepanel',
	        width: 200,
	        autoScroll: true,
	        split: true,
	        loader: new Ext.tree.TreeLoader(),
	        root: new Ext.tree.AsyncTreeNode({
	            expanded: true,
	            children: [{
	                text: 'Menu Option 1',
	                leaf: true
	            }, {
	                text: 'Menu Option 2',
	                leaf: true
	            }, {
	                text: 'Menu Option 3',
	                leaf: true
	            }]
	        }),
	        rootVisible: false,
	        listeners: {
	            click: function(n) {
	                Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');
	            }
	        }
	    }, {
	        region: 'center',
	        xtype: 'tabpanel',
	        items: [{
	            title: 'Welcome',
 	            html: 'Welcome to the Pet Clinic.'
//				autoLoad: {url:'./welcome.jsp'}
	        },ownerForm]
	    }, {
	        region: 'south',
	        title: 'Information',
	        collapsible: true,
	        html: 'Information goes here',
	        split: true,
	        height: 100,
	        minHeight: 100
	    }]
	});

	Ext.get('loading').hide(true);

});